<template>
  <view class="notice-page">
    <view class="notice-wrap">
      <!-- header -->
      <view class="header">
        <view class="top">置顶</view>
        <view class="title"> {{ info.title }} </view>
      </view>

      <!-- sub-title -->
      <view class="sub-title">
        <view class="time">
          <uni-dateformat
            :date="info.publish_date"
            format="yyyy-MM-dd"></uni-dateformat>
          <view class="name">{{ info.author }}</view>
        </view>
        <view class="number">
          <uni-icons type="eye" size="20"></uni-icons>
          <text>{{ info.view_count }}</text>
        </view>
      </view>

      <!-- content -->
      <view class="content">
        <view class="html" v-html="info.content"></view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { apiNoticeDetail } from '@/api'

const title = ref('公告详情')
const info = ref({
  id: 1,
  title: '',
  content: '',
  publish_date: '',
  view_count: 0,
})

console.log('%c Line:46 🍋', 'color:#465975', info.value)

onLoad(e => {
  console.log('%c Line:21 🍔 e', 'color:#e41a6a', e)
  e.title && (title.value = e.title)
  info.value.id = e.id
  uni.setNavigationBarTitle({ title: title.value })

  getNoticeDetail()
})

const getNoticeDetail = async () => {
  info.value = await apiNoticeDetail({ id: info.value.id })
}
</script>

<style lang="scss" scoped>
.notice-page {
  background-color: $white-color;
  min-height: 90vh;
}

.notice-wrap {
  display: flex;
  flex-direction: column;

  .header {
    padding: 20rpx 30rpx;

    .top {
      display: flex;
      align-items: center;
      justify-content: center;

      position: absolute;
      width: 80rpx;
      margin-right: 16rpx;
      color: $uni-color-error;
      border: 1px solid $uni-color-error;
      border-radius: 4rpx;
    }

    .title {
      flex: 1;
      text-indent: 2.5em;
      color: $font-color-2;
      font-size: $font-size-2;
    }
  }

  .sub-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 30rpx;
    padding: 10rpx 0;
    color: $font-color-4;
    // border-bottom: 1px solid $border-color-2;

    :deep() {
      .uni-icons {
        color: $uni-text-color-grey !important;
      }
    }

    .time {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16rpx;
    }

    .number {
      display: flex;
      align-items: center;
      gap: 10rpx;
    }
  }

  .content {
    padding: 0 30rpx;
    padding-top: 20rpx;
    font-size: $font-size-1;
    color: $font-color-2;
  }
}
</style>
